<template>
    <div class="exception-handle">

        <div class="exception-table">
            <div class="exception-table-content">
                <el-table
                    :data="tableData"
                    stripe
                    border
                    class="adjustAppendTable"
                    style="width: 100%">
                    <el-table-column type="expand" width="30px">
                        <template slot-scope="scope">
                            <div class="note"
                                v-if="scope.row.debtNumber"
                            >
                                <span class="title">财务明细</span>
                                <span>已支付数量 {{ scope.row.paidNumber  | thousandSep }}吨，剩余未支付数量
                                    <span class="mark" v-if="scope.row.debtNumber">{{ scope.row.debtNumber  | thousandSep}}</span>
                                    <span v-else>0</span> 吨，请尽快处理!
                                </span>
                                <el-link type="primary" :underline="false" @click="add(scope.row)">立即处理</el-link>
                            </div>
                            <el-table :data="scope.row.children" border background class="appendTable">
<!--                                <el-table-column type="selection" width="55"></el-table-column>-->
                                <el-table-column type="index" label="序号" width="60" align="center">
                                    <template slot-scope="scope">
                                        <span>{{scope.$index + 1}}
                                        </span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="companyAccountType" label="账户类型" min-width="100">
                                    <template slot-scope="businessWeight">
                                        <el-link type="primary" v-if="businessWeight.row.paymentState!=1 && businessWeight.row.paymentState!=3" :underline="false" @click="info(scope.row,businessWeight.row)">{{$dictUtils.getDictLabel("financeAccountType", businessWeight.row.companyAccountType, "")}}</el-link>
                                        <span v-else>{{$dictUtils.getDictLabel("financeAccountType", businessWeight.row.companyAccountType, "")}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="codes" label="业务编号" min-width="100"></el-table-column>
                                <el-table-column prop="productPrice" align="right" label="单价"></el-table-column>
                                <el-table-column prop="quantity" label="数量">
                                  <template slot-scope="scope">
                                      {{scope.row.quantity | thousandSep}}
                                  </template>
                                </el-table-column>
                                <el-table-column  class="money" align="right" label="金额">
                                  <template slot-scope="scope">
                                      {{scope.row.money | thousandSep}}
                                  </template>
                                </el-table-column>
                                <el-table-column prop="paymentTime" label="支付时间" min-width="190"></el-table-column>
                                <el-table-column prop="receivePeople" label="收款人" min-width="120">
                                    <template slot-scope="scope">
                                        {{scope.row.receivePeople | noValue}}
                                    </template>
                                </el-table-column>
<!--                                <el-table-column></el-table-column>-->
<!--                                <el-table-column></el-table-column>-->
                                <el-table-column prop="paymentState" label="状态" min-width="100">
                                    <template slot-scope="scope">
                                        <div class="state" :class="{
                                            normal:scope.row.paymentState === 100,
                                            invalid:scope.row.paymentState === -1 || scope.row.paymentState === 4,
                                            process:scope.row.paymentState === 2,
                                            empty:scope.row.paymentState === 1 || scope.row.paymentState === 3
                                        }">
                                            <span></span>{{$dictUtils.getDictLabel("busState", scope.row.paymentState, "")}}
                                        </div>

                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" label="操作" width="201">
                                    <template slot-scope="businessWeight">
<!--                                        <el-link type="primary" v-if="businessWeight.row.paymentState!=1 || businessWeight.row.paymentState!=3" :underline="false" @click="info(scope.row,businessWeight.row)">详情</el-link>-->
                                        <el-link type="primary" v-if="businessWeight.row.paymentState!=2 && businessWeight.row.paymentState!=100" :underline="false" @click="edit(scope.row,businessWeight.row)">修改</el-link>
                                        <el-link type="primary" v-if="businessWeight.row.paymentState!=2 && businessWeight.row.paymentState!=100" :underline="false" @click="del(businessWeight.row.id,businessWeight.row.paymentState)">
                                            删除
                                        </el-link>
                                        <el-link type="primary" v-if="businessWeight.row.paymentState!=2 && businessWeight.row.paymentState!=100" :underline="false" @click="submit(scope.row,businessWeight.row)">提交</el-link>
                                        <el-link type="primary" v-if="businessWeight.row.paymentState===2" :underline="false" @click="revoke(scope.row,businessWeight.row)">撤销</el-link>

                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="40" align="center">
                        <template slot-scope="scope">
                            <span>{{
                                    (page.pageNo - 1) * page.pageSize + scope.$index + 1
                                    }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="过磅时间" prop="gross.weightTime" min-width="200"></el-table-column>
                    <el-table-column label="过磅单号" prop="weightCode" min-width="180">
                        <template slot-scope="scope">
                            {{scope.row.weightCode | noValue}}
                        </template>
                    </el-table-column>
<!--                    <el-table-column label="业务编号" prop="business.codes" min-width="110"></el-table-column>-->
                    <el-table-column label="车牌号" prop="transport.truckNumber" width="120"></el-table-column>
                    <el-table-column label="产品名称" prop="product.name" min-width="120"></el-table-column>
                    <el-table-column label="客户名称" prop="business.companyName" min-width="200"></el-table-column>
                    <el-table-column label="毛重" min-width="90">
                      <template slot-scope="scope">
                          {{scope.row.weightGross | thousandSep}}
                      </template>
                    </el-table-column>
                    <el-table-column label="皮重" min-width="90">
                      <template slot-scope="scope">
                          {{scope.row.weightTare | thousandSep}}
                      </template>
                    </el-table-column>
                    <el-table-column label="净重"  min-width="90">
                      <template slot-scope="scope">
                          {{scope.row.netWeight | thousandSep}}
                      </template>
                    </el-table-column>
                    <el-table-column label="未支付数量"  min-width="120">
                        <template slot-scope="scope">
                            {{scope.row.debtMoney | thousandSep}}
                        </template>
                    </el-table-column>
                    <el-table-column label="数据类别" prop="business.dataType" min-width="110">
                        <template slot-scope="scope">
                            <span v-if="scope.row.business">{{ $dictUtils.getDictLabel("dataType", scope.row.business.dataType, "")   | noValue}}</span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="支付方式" prop="payMode" min-width="110">
                        <template slot-scope="scope">
                            {{ $dictUtils.getDictLabel("payMode", scope.row.payMode, "") | noValue}}
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="page.pageSize"
                    :current-page="page.pageNo"
                    layout="total,sizes,prev, pager, next, jumper"
                    :total="page.total"
                >
                </el-pagination>
            </div>
            <EditForm
                ref="EditForm"
                @refreshDataList="getList(page, '', '', '', '', '', null)"
            ></EditForm>
            <detail ref="detail" @refreshDataList="getList(page, '', '', '', '', '', null)"></detail>
        </div>

    </div>
</template>

<script>
    import {listChild} from '@/api/weightingManagent/weight.js'
    import EditForm from './editForm'
    import detail from './detail'

    export default {
        components: {
            EditForm,
            detail
        },
        data() {
            return {
                dateInput: '',
                value1: [],
                input: '',
                checked: true,
                tableData: [],
                page: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 0
                },
                queryForm: {
                    keyword: '',
                    startTime: '',
                    endTime: '',
                    processType: 1
                },
                orderBy: {
                    name: '',
                    method: ''
                }
            }
        },
        methods: {
            handleSizeChange(e) {
                this.page.pageSize = e
                this.getList(this.page, '', '', '', '', '', null)
            },
            handleCurrentChange(e) {
                this.page.pageNo = e
                this.getList(this.page, '', '', '', '', '', null)
            },
            viewDetail(row) {
                this.$refs.details.init('view', row)
            },
            // 发卡记录
            operateList(row) {
                this.$refs.operateDetail.init('send', row)
            },
            reset() {
                this.queryForm.keyword = ''
                this.queryForm.startTime = ''
                this.queryForm.endTime = ''
                this.dateInput = ''
            },
            // 获取列表带分页
            getList(params, orderName, orderByAORC, keyword, startTime, endTime, processType) {
                this.loading = true
                listChild({
                    pageSize: params.pageSize,
                    pageNo: params.pageNo,
                    orderBy: orderName,
                    orderByAORC: orderByAORC,
                    keyword: keyword,
                    startTime: startTime,
                    endTime: endTime,
                    processType: processType
                }).then(({data}) => {
                    if (data.code === '200') {
                        this.tableData = data.result.list
                        this.page.total = data.result.count
                        this.loading = false
                    }
                })
            },
            // 删除
            del (ids, state) {
                if (state === 1) {
                    this.$notify.error({
                        title: '错误',
                        message: '已启用，不支持删除！'
                    });
                } else if (state === 0) {
                    this.$notify.error({
                        title: '错误',
                        message: '已停用，不允许任何操作！'
                    });
                } else if (state === -1) {
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then((res) => {
                        del ({
                            ids: ids
                        }).then((res) => {
                            if (res.data.code === '200') {
                                this.$message({
                                    type: 'success',
                                    message: '已删除!'
                                })
                                this.getList(this.page, this.orderBy.name, this.orderBy.method)
                            }
                        })
                    });
                }
            },
            // 添加
            add (weightRow,businessWeightRow) {
                this.$refs.EditForm.init('add',  weightRow, businessWeightRow)
            },
            // 详情
            info (weightRow,businessWeightRow) {
                this.$refs.detail.init('info', weightRow, businessWeightRow);
            },
            // 编辑
            edit ( weightRow, businessWeightRow) {
                this.$refs.EditForm.init('edit',  weightRow, businessWeightRow)
            },
            changeHandlerDate(e) {
                this.queryForm.startTime = e[0]
                this.queryForm.endTime = e[1]
            }
        },
        mounted() {
            this.getList(this.page, '', '', '', '', '', null)
        }
    }
</script>

<style lang="scss" scoped>
    @import '@/assets/scss/config.scss';
    .exception-handle {
        ::v-deep.exception-table {
            .adjustAppendTable.el-table .el-table__expanded-cell{
                padding-top: 16px;
            }
            .note{
                margin-bottom: 10px;
                .title{
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #333333;
                    margin-right: 20px;
                }
                .title+span{
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #666666;
                }
                .mark{
                    color: #FF3E3E;
                }
                .el-link{
                    margin-left: 20px;
                    vertical-align: baseline;
                }
            }
            .appendTable{
                .is-right{
                    .cell{
                        text-align: right !important;
                    }
                }

            }
        }

    }
</style>
